<template>
	<div class="about">
		<v-container>
			<v-expansion-panels>
				<v-expansion-panel
					v-for="(subject,index) in subjects"
					:key="index"
				>
					<!-- 考试课程提示信息start -->
					<v-expansion-panel-header>
						<v-card flat>
							<v-row>
								<v-col
									cols="12"
									md="6"
								>
									<h1 class="text-caption grey--text mb-2">课程名称</h1>
									<p>{{subject.name}}</p>
								</v-col>
								<!-- <v-col
									cols="6"
									sm="4"
									md="2"
								>
									<h1 class="text-caption grey--text mb-2">出题人</h1>
									<p>{{subject.person}}</p>
								</v-col>
								<v-col
									cols="6"
									sm="4"
									md="2"
								>
									<h1 class="text-caption grey--text mb-2">截止时间</h1>
									<p>{{subject.due}}</p>
								</v-col> -->
								<v-col
									cols="2"
									sm="4"
									md="2"
								>
								</v-col>
							</v-row>
						</v-card>
					</v-expansion-panel-header>
					<!-- 考试课程提示信息end -->

					<!-- 具体考试课程对应试题部分start -->
					<v-expansion-panel-content>
						<v-card flat>
							<!-- 试卷列表搜索模块start -->
							<v-row>
								<v-col>
									<v-card-title>{{subject.name}}</v-card-title>
								</v-col>
								<v-col>
									<v-text-field
										v-model="subject.search"
										append-icon="mdi-magnify"
										label="输入试卷名称"
										single-line
										hide-details
									></v-text-field>
								</v-col>
							</v-row>
							<!-- 试卷列表搜索模块end -->

							<!-- 试卷列表模块start -->
							<v-data-table
								:headers="headers"
								:items="subject.papers"
								:search="subject.search"
							>

								<!-- 试题操作模块插槽start -->
								<!-- 试题操作模块插槽end -->

								<!-- 学生成绩模块插槽start -->
								<!-- 学生成绩模块插槽end -->

							</v-data-table>
							<!-- 试卷列表模块start -->

						</v-card>
					</v-expansion-panel-content>
					<!-- 具体考试课程对应试题部分end -->
				</v-expansion-panel>
			</v-expansion-panels>
		</v-container>
	</div>
</template>

<script>
import { getUserAccount } from '@/api/Login'
import { getStudentClasses, getTeacherClasses } from '@/api/Info'
import { getStudentAllPapers, getTeacherAllPapers } from '@/api/Paper'
export default {
	name: 'ExamSubjects',
	data() {
		return {
			account: '',
			/**
			 * 用户名下全部课程，每个对象包含：
			 * @name 课程名称,
			 * @cid 课程编号,
			 * @papers 课程下所有试题,
			 * @search 搜索课程下的试题
			 */
			subjects: [],
			// 试题表格头部提示信息
			headers: [
				{
					text: '试卷编号',
					align: 'start',
					sortable: false,
					value: 'pid',
				},
				{ text: '试卷名称', value: 'pdescribe' },
				{ text: '截至时间', value: 'deadline' },
				{ text: '操作', value: 'action' },
				{ text: '成绩', value: 'score' },
			],
		}
	},

	created() {
		this.account = getUserAccount()
		// 获取课程列表
		let getClasses = {
			s: getStudentClasses,
			t: getTeacherClasses,
		}
		getClasses[this.account[0]]({
			[this.account[0] + 'num']: this.account,
		}).then((res) => {
			res.data.forEach((item) => {
				this.subjects.push({
					name: item.cname, // 课程名字
					cid: item.cid, // 用于接下来根据cid获取该课程下所有的试卷
					papers: [], //
					search: '',
				})
			})

			// 获取对应课程下的所有试卷
			let getPapers = {
				s: getStudentAllPapers,
				t: getTeacherAllPapers,
			}
			this.subjects.forEach((subject) => {
				getPapers[this.account[0]]({
					cid: subject.cid,
					[this.account[0] + 'num']: this.account,
				}).then((res) => {
					console.log(res)
					if (!res.data.msg) {
						subject.papers = res.data.filter((paper) => paper)
						subject.papers.forEach((paper) => {
							paper['paperName'] = paper.pdescribe
						})
					}
				})
			})
		})
	},
}
</script>

